<template>
  <div class="header">
    <a-button type="primary" @click="addFileClick">
      <template #icon>
        <icon-folder-add />
      </template>
      上传文件
    </a-button>

    <!-- 上传文件的弹窗 -->
    <a-modal v-model:visible="filesStore.isShowUploadModal" :footer="false">
      <template #title> 上传文件 </template>
      <div class="uploadModal_box">
        <!-- <div>
          <span class="selectFileTypeTitle">选择文件类型</span>
         
        </div>
        <div>
          <span class="fileDesc">文件描述</span>
          
        </div>
       -->

        <a-form :model="{}" style="width: 370px">
          <a-form-item label="文件名称">
            <a-input
              v-model="filesStore.addFileParams.fileName"
              :style="{ width: '260px' }"
              placeholder="请输入名称"
              allow-clear
            />
          </a-form-item>
          <a-form-item label="文件类型">
            <a-select
              :style="{ width: '160px' }"
              v-model="filesStore.$state.addFileParams.fileTypeCode"
              placeholder="请选择文件类型"
              allow-clear
            >
              <a-option v-for="ftl in filesStore.fileTypeList" :key="ftl.id" :value="ftl.dictCode">{{
                ftl.dictName
              }}</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="文件描述">
            <a-textarea
              v-model="filesStore.addFileParams.fileDesc"
              :style="{ width: '260px' }"
              placeholder="请输入文件描述"
              allow-clear
            />
          </a-form-item>
          <a-form-item>
            <a-upload
              :action="filesStore.fileActionUrl"
              tip="选择文件"
              class="uploadFileBtn"
              :disabled="isSelectFileType"
              :headers="{
                accessToken: filesStore.currentAccessToken,
                platFormUserId: filesStore.addFileParams.uploadUser
              }"
              :show-file-list="false"
              @success="uploadFileSuccess"
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from 'vue'
export default defineComponent({
  name: 'Header'
})
</script>
<script lang="ts" setup>
// 引入
import { useFilesStore } from '@/store'
const filesStore = useFilesStore()

// 是否已选择文件类型
const isSelectFileType = computed(() => {
  return filesStore.$state.addFileParams.fileTypeCode == '' || filesStore.$state.addFileParams.fileName == ''
})

// 点击上传文件的点击事件
const addFileClick = () => {
  filesStore.isShowUploadModal = true
}

// 文件上传成功的函数
const uploadFileSuccess = (e: any) => {
  filesStore.addFileParams.filePath = e.response.data.filePath
  filesStore.addFileParams.fileUrl = e.response.data.fileUrl
  filesStore.addFileFunc()
}

// 初始化
onMounted(() => {
  filesStore.getFileTypeListFunc()
  filesStore.getAccessTOkenFunc()
})
</script>

<style  scoped>
.header {
  width: 100%;
  /* background: greenyellow; */
  height: 60px;
  line-height: 60px;
}

.selectFileTypeTitle {
  margin-right: 10px;
}

.uploadFileBtn {
  margin-left: 10px;
}

/* ::v-deep .uploadFileBtn {
  margin-top: 30px;
} */

.uploadModal_box {
  padding-top: 20px;
  padding-left: 60px;
}
</style>